<template>
	<view class="supUpload">
		<view class="classific" v-if="listType==0">
			<view class="title ">
				植物分类
			</view>
			<view class="class">
				<!-- <view class="class1 item">
					<vvSelect placeholder="请选择类别" class="select" :list="categorys" label="name" valueKey="id"
						@change="pickerChange">
					</vvSelect>
					<u-icon name="arrow-down" color="#E2E2E2" size="14"></u-icon>
				</view>
				<view class="class2 item">
					<vvSelect placeholder="请选择类别" class="select" :list="categorys" label="name" valueKey="id"
						@change="pickerChange">
					</vvSelect>
					<u-icon name="arrow-down" color="#E2E2E2" size="14"></u-icon>
				</view>
				<view class="class3 item">
					<vvSelect placeholder="请选择类别" class="select" :list="categorys" label="name" valueKey="id"
						@change="pickerChange">
					</vvSelect>
					<u-icon name="arrow-down" color="#E2E2E2" size="14"></u-icon>
				</view> -->
				<vvSelectArea :list="typeList" v-model="zwtype" placeholder="请选择植物类别" class="top" @change="changeType"  style="color:#303133"
					ref="zwSel" type="3">
				</vvSelectArea>
			</view>
		</view>
		<view class="inputData">
			<view class="fl-left">
				苗木名称
			</view>
			<view class="input-right">
				<u--input placeholder="请输入苗木名称" border="surround" v-model="formData.name" class="">
				</u--input>
			</view>
		</view>
		<view class="upImg">
			<view class="">
				上传图片
			</view>
			<imgUpload code="zsbm" placeholder="请上传图片" :limit="6" @upImgs="upImgs" ref="imgUpload"></imgUpload>
		</view>

		<view class="gg-info">
			<view class="info-top">
				——规格选填——
			</view>
			<view class="gg-info-content">
				<view class="left">
					<!-- <u-form :model="form" ref="uForm"> -->
					<view class="inputData" v-for="item in specsList" :key="item.id">
						<view class="fl-left " :class="[item.is_required==0? '':'org']">
							{{item.title}}
						</view>
						<view class="input-right">
							<!-- <u-form-item prop="value"> -->
							<u--input :placeholder="item.is_required==0?'选填内容':'必填内容'" border="surround"
								v-model="item.value" fontSize="26rpx">
							</u--input>
							<!-- 	</u-form-item> -->
							<view class="dw " :class="[item.is_required==0? '':'org']">
								{{item.unit}}
							</view>
						</view>
					</view>
					<!-- 	</u-form> -->
				</view>
				<!-- <view class="right">
					<view class="inputData">
						<view class="fl-left">
							地径
						</view>
						<view class="input-right">
							<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" class="">
							</u--input>
							<view class="dw">
								公分
							</view>
						</view>
					</view>
					<view class="inputData">
						<view class="fl-left">
							分支点
						</view>
						<view class="input-right">
							<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" class="">
							</u--input>
							<view class="dw">
								厘米
							</view>
						</view>
					</view>
					<view class="inputData">
						<view class="fl-left">
							杆数
						</view>
						<view class="input-right">
							<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" class="">
							</u--input>
							<view class="dw">
								杆
							</view>
						</view>
					</view>
					<view class="inputData">
						<view class="fl-left">
							每杆
						</view>
						<view class="input-right">
							<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" class="">
							</u--input>
							<view class="dw">
								厘米
							</view>
						</view>
					</view>
					<view class="inputData">
						<view class="fl-left">
							厚度
						</view>
						<view class="input-right">
							<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" class="">
							</u--input>
							<view class="dw">
								厘米
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="cpjj">
			<view class="jj-left">
				产品简介
			</view>
			<uni-easyinput :disabled="i.disabled" v-model="formData.introduction" maxlength="50" type="textarea"
				:placeholder="'请描述高度范围，冠幅范围，每个规格每个品种分别发布'">
			</uni-easyinput>
			<view class="jj-xt">
				必填
			</view>
		</view>
		<view class="otherInfo">
			<view class="other-list">
				<view class="left">
					苗木等级
				</view>
				<view class="right" style="margin-top: 20rpx;">
					<u-radio-group v-model="radiovalue1" placement="row">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange(item)" activeColor="#00C777"
							:value="item.value">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="other-list" v-if="listType==0">
				<view class="left">
					价格
				</view>
				<view class="right">
					<u--input placeholder="请输入内容" v-model="formData.price" class="" :border="border">
					</u--input>元
				</view>
			</view>
			<view class="other-list" v-if="listType==1">
				<view class="left">
					数量
				</view>
				<view class="right">
					<u--input placeholder="请输入求购数量" border="surround" v-model="formData.num" class="" type="number">
					</u--input>株
				</view>
			</view>
			<view class="other-list" v-if="listType==1">
				<view class="left">
					有效时间
				</view>
				<view class="right" @click="choiceDate">
					{{formData.effective_time||'选择时间'}}
					<!-- <button @click="choiceDate">选择有效时间</button> -->
				</view>
			</view>
			<view class="other-list" v-if="listType==1">
				<view class="left">
					公司名称
				</view>
				<view class="right">
					<u--input placeholder="请输入公司名称" border="surround" v-model="formData.company_name" class="">
					</u--input>
				</view>
			</view>
			<view class="other-list">
				<view class="left">
					区域地址
				</view>
				<view class="right">
					<view class="myAddress">
						<view class="cityAddres">
							<vvSelectArea :list="areas" v-model="companyArea" placeholder="请选择所在区域" class="top"
								@change="changecity" ref="csSel" type="3"></vvSelectArea>
							<!-- <view class="city" @click="goMap">
								<u-icon name="map" color="#00C777" size="18" class="top"></u-icon>
								<view>坐标</view>
							</view> -->
						</view>
						<!-- <view class="address">
							{{formData.address}}
						</view> -->
					</view>
				</view>
			</view>
			<view class="other-list">
				<view class="left">
					详细地址
				</view>
				<view class="right">
					<view class="myAddress">
						<view class="cityAddres">
							<!-- <vvSelectArea :list="areas" v-model="companyArea" placeholder="请选择所在区域" class="top"
								@change="changecity" ref="csSel"></vvSelectArea> -->
							<view class="top">
								{{formData.address}}
							</view>
							<view class="city" @click="goMap">
								<u-icon name="map" color="#00C777" size="18" class="top"></u-icon>
								<view>坐标</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="other-list">
				<view class="left">
					电话
				</view>
				<view class="right">
					<u--input placeholder="请输入电话号码" border="surround" v-model="formData.phone" class="" type="number">
					</u--input>&nbsp;&nbsp;
				</view>
			</view>
			<view class="other-list">
				<view class="left">
					<!-- <u-radio-group v-model="value" placement="row">
						<u-radio activeColor="#00C777" ></u-radio>
					</u-radio-group> -->
					<radio-group>
						<label v-for="(item, index) in List" :key="index">
							<radio :class="active == index1 ? 'checked' : ''" :checked="active== index1" :value="index1"
								@click="radioChange1(index)" />
						</label>
					</radio-group>
				</view>
				<view class="right">
					阅读并同意<text style="color: #FD4343;" @click="goPro">《相关条款》</text>
				</view>
			</view>
			<!-- <u-button  shape="" text="提交" class="custom-style"></u-button> -->
			<view class="">
				<u-button class="custom-style" text="提交" customStyle="background-color: #00C777;color:#fff"
					@click="submit"></u-button>
			</view>
			<u-datetime-picker :show="show" mode="date" @confirm="confirm" ref="datetimePicker" @cancel='show=false'
				:formatter="formatter" :minDate="minDate">选择有效时间</u-datetime-picker>
		</view>
		<u-toast ref="uToast"></u-toast>
		<bottomShow :showPop="showBottom" :title="bottomTitle" :tip="bottomTip" @refuse="refuse" @submit="subTel">
		</bottomShow>
	</view>
</template>

<script>
	// import vvSelect from '@/components/vv-select/vv-select.vue'
	import imgUpload from '@/components/common/imgUpload.vue'
	import vvSelectArea from '@/components/vv-select-area/vv-select-area'
	import bottomShow from '@/components/common/bottomShow.vue'
	import {
		cityList,
		typeList,
		specsList,
		supplySub,
		myBuySub,
		getUser
	} from '@/request/api.js'
	export default {
		components: {
			// vvSelect,
			imgUpload,
			vvSelectArea,
			bottomShow
		},
		props: ['listType', 'type'],
		options: {
			styleIsolation: 'shared' // 解除样式隔离
		},
		data() {
			return {
				form: {
					value: ''
				},
				rules: {
					value: [{
						required: true,
						message: '请输入',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				showNotify: true,
				List: [{
					name: '协议'
				}],
				active: 0, // 选中协议与否
				index1:0,
				zwtype: '',
				border: true,
				typeList: [],
				minDate: '',
				companyArea: '',
				areas: [], // 地址list
				// customStyle: {
				// 	marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				// 	color: 'red'
				// },
				show: false,
				radiolist1: [{
						name: '精品',
						value: '1',
						disabled: false
					},
					{
						name: '好货',
						value: '2',
						disabled: false
					},
					{
						name: '普通',
						value: '3',
						disabled: false
					}, {
						name: '处理',
						value: '4',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '精品',
				categorys: [

				],
				specsList: [],
				fullList: [],
				stuff_images: '',
				formData: {
					imgs: '',
					name: '',
					specs_config: '', //规格配置
					introduction: '', //产品简介
					lvl: '1', //等级
					phone: '', //电话号码
					company_name: '', //公司名称
					effective_time: '', //有效时间
					company_name: '', //公司名称
					address: '', //地址
					lng: '',
					lat: '',
					province_id: '',
					city_id: '',
					county_id: '',
					type_name: '', //类型名称
					type_id: '',
					price: '',
					num: ''
				},
				is_nursery_certification: 1, //默认是1.商户已认证的在状态
				showTitle: false,
				showBottom: false,
				bottomTitle: '',
				bottomTip: ''
			}
		},
		onShow() {
			this.showBottom = false;
		},
		created() {
			
			this.bottomTitle = '供应上传'
			this.bottomTip = '提示：供应上传功能需要商户认证后才能上传，请您去我的页面进行商户苗圃认证！'
			// this.getUser()
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.uForm.setRules(this.rules);
			this.$refs.datetimePicker.setFormatter(this.formatter)
			// this.getTypeList()
			// this.getCity()
			// this.GetSpecsList()
			const t1 = new Date().valueOf() // 第一种，推荐
			const t2 = new Date().getTime() // 第二种，推荐
			this.minDate = t1
			uni.$on('map', e => { //
				// console.log(e)
				this.formData.lng = e.longitude
				this.formData.lat = e.latitude
				this.formData.address = e.local
			})
		},
		methods: {
			refuse() {
				this.showBottom = false
			},
			subTel() {
				this.showBottom = false
			},
			getUser() {
				getUser().then(res => {
					this.is_nursery_certification = res.data.is_nursery_certification
					console.log(this.is_nursery_certification)
				})
			},
			amountCer(val) {
				var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				// let reg = / (([1-9]{1}\d*)(.\d{1,2})?)|(0{1}.\d{1,2})/
				if (reg.test(val)) {
					// console.log(true)
					return true;
				} else {
					// console.log(false)
					return false;
				};
			},
			goPro() {
				uni.navigateTo({
					url: `/pages/index/noticeList/details?title=相关协议&content=协议内容,要遵守`
				})
			},
			radioChange1(index) {
				console.log(this.active,'this.active2')
				if (this.active == index) { // 如果已经选中，则取消选中
					this.active = null;
				} else { // 否则进行选中赋值
					this.active = index;
				}
			},
			goMap() {
				uni.navigateTo({
					url: "/components/common/mapInfo"
				})
			},
			upImgs(e) {
				console.log(e)
				let arr = e.images
				this.formData.imgs = arr.join(',')
				console.log(arr, this.formData);
			},
			changecity(val, label) {
				// console.log(val)
				this.formData.province_id = val[0]
				this.formData.city_id = val[1]
				this.formData.county_id = val[2]
				console.log(this.formData)
			},
			changeType(val, label) {
				// console.log(val)
				this.formData.type_name = label;
				let num = val.length - 1
				this.formData.type_id = val[num]
				// console.log(this.formData.type_name,this.formData.type_id)
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}`
				}
				if (type === 'month') {
					return `${value}`
				}
				if (type === 'day') {
					return `${value}`
				}
				return value
			},
			confirm(e) {
				// console.log(e)
				const timeFormat = uni.$u.timeFormat
				let date = timeFormat(e.value)
				//console.log(date)
				this.formData.effective_time = date
				// console.log(timeFormat(e.value, 'yyyy-mm-dd'))
				// console.log(timeFormat(e.value, 'yyyy-mm-dd hh:MM'))
				// console.log(timeFormat(e.value, 'yyyy-mm'))
				this.show = false
			},
			choiceDate() {
				this.show = true
			},
			specsConfig() {
				let str = ''
				this.specsList.forEach(item => {
					str += `${item.id}=${item.value},`
				})
				if (str.length > 0) {
					str = str.substr(0, str.length - 1)
				}
				this.formData.specs_config = str
				// console.log(str)
			},
			verification() {
				if (this.listType == 0) { //上传的供应
					if (this.formData.type_id == '') {
						this.$refs.uToast.show({
							message: '请选择植物类别',
							type: 'error',
							duration: 1500
						})
						return false
					}
				}
				if (this.formData.name == '') {
					this.$refs.uToast.show({
						message: '请输入名称',
						type: 'error',
						duration: 1500
					})
					return false
				}
				if (this.formData.phone == '') {
					this.$refs.uToast.show({
						message: '请输入电话号码',
						type: 'error',
						duration: 1500
					})
					return false
				}
				if (this.formData.address == '') {
					this.$refs.uToast.show({
						message: '请选择详细地址',
						type: 'error',
						duration: 1500
					})
					return false
				}
				if (this.formData.city_id == '') {
					this.$refs.uToast.show({
						message: '请选择区域地址',
						type: 'error',
						duration: 1500
					})
					return false
				}
				if (this.formData.imgs == '') {
					this.$refs.uToast.show({
						message: '请上传图片',
						type: 'error',
						duration: 1500
					})
					return false
				}
				let cer = true;
				this.specsList.forEach(item => {
					if (item.is_required == 1 && item.value == '') {
						this.$refs.uToast.show({
							message: '请输入规格选填中的必填',
							type: 'error',
							duration: 1500
						})
						cer = false
					}
					if (item.value != '') {
						let price = this.amountCer(item.value)
						if (!price) {
							this.$refs.uToast.show({
								message: '规格选填最多输入两位小数',
								type: 'error',
								duration: 1500
							})
							cer = false
						}
					}
				})
				return cer;
			},
			submit() {
				// console.log(this.formData)
				this.specsConfig() //规格编列
				// console.log(this.is_nursery_certification)
				if (this.is_nursery_certification == 0 && this.listType == 0) {
					this.showBottom = true;
					return false;
				}
				if (this.active == null) {
					this.$refs.uToast.show({
						type: 'error',
						title: '请同意相关条款',
						message: "请同意相关条款",
					})
					return false
				}
				let price = this.amountCer(this.formData.price)
				if (!price && this.listType == 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "价格为必填且只能输入数字和小数点两位",
					})
					return false
				}
				let ver = this.verification()
				if (ver == false) {
					return false;
				}
				if (this.listType == 0) { //上传的供应
					this.supplySub()
				} else {
					this.myBuySub()
				}

			},
			emptForm() {
				for (let k in this.formData) {
					this.formData[k] = ''
				}
				this.specsList.map(item => {
					item['value'] = ''
				})
				this.companyArea = ''
				this.zwtype = ''
				this.radiovalue1 = '精品'
				this.formData.lvl = 1
				this.$refs.csSel.emptCheckLabels()
				if (this.listType == 0) {
					this.$refs.zwSel.emptCheckLabels()
				}
				this.$refs.imgUpload.empt()
				// console.log(this.formData)
			},
			myBuySub() {
				myBuySub(this.formData).then((res) => {
					if (res.code == 1) {
						let title = this.listType == 0 ? '供应上传已成功' : '求购上传已成功'
						this.$emit('changeType')
						uni.navigateTo({
							url: '/my_pages/components/success?title=' + title
						})
						// this.$refs.imgUpload.empt()
						this.emptForm()
					}
				})
			},
			supplySub() {
				// this.$refs.imgUpload.empt()

				supplySub(this.formData).then((res) => {
					if (res.code == 1) {
						this.$emit('changeType')
						let title = this.listType == 0 ? '供应上传已成功' : '求购上传已成功'
						uni.navigateTo({
							url: '/my_pages/components/success?title=' + title
						})
						// this.$refs.imgUpload.empt()
						this.emptForm()
					}
				})
			},

			getCity() {
				if (this.type == 'map') {
					return false
				}
				cityList().then(res => {
					// console.log(res)
					this.areas = res.data
				})
			},
			getTypeList() { //植物类型
				if (this.type == 'map') {
					return false
				}
				console.log(this.type)
				typeList().then(res => {
					// console.log(res)
					this.typeList = res.data
				})
			},
			GetSpecsList() { //规格
				if (this.type == 'map') {
					return false
				}
				specsList().then(res => {
					// console.log(res)
					res.data.map(item => {
						item['value'] = ''
					})
					// console.log(res.data)
					this.specsList = res.data
				})
			},
			selectTab(e) {
				this.page = 1
				this.list = []
				this.tabIndex = e.index
				this.getData()
			},
			pickerChange(e) {
				console.log(e)
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.formData.lvl = n.value
				console.log(this.radiovalue1)
			}

		}
	}
</script>

<style lang="scss" scoped>
	// .custom-style {
	// 	color: #fff;
	// }
	::v-deep .custom-style .u-button {
		color: #00C777;
		background-color: #00C777 !important;
	}

	::v-deep .supUpload .u-form {
		display: flex;
		flex-wrap: wrap;
	}

	::v-deep .supUpload .u-input__content .u-input__content__field-wrapper__field {
		border: 1px solid #E2E2E2 !important;
		border-radius: 7rpx;
	}

	// /deep/ .u-form-item {
	// 	flex-shrink: inherit !important;
	// }

	.supUpload {
		.otherInfo {
			background-color: #fff;
			padding: 20rpx;
			font-size: 28rpx;

			.other-list {
				display: flex;
				align-items: center;
				border-top: 1px solid #E2E2E2;
				padding: 20rpx 0;

				.left {
					width: 20%;
				}

				.right {
					display: flex;
					align-items: center;
					width: 80%;

					.myAddress {
						display: flex;
						flex-direction: column;
						width: 100%;

						.cityAddres {
							display: flex;

							.top {
								flex: 1;
							}

							.city {
								color: #00C777;
								width: 48px;
								display: flex;
							}
						}

						.address {}
					}
				}
			}
		}

		.cpjj {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			background: #fff;
			font-size: 28rpx;

			.jj-left {
				margin-right: 20rpx;
				width: 20%;
			}

			.jj-xt {
				margin-left: 20rpx;
			}
		}

		.gg-info {
			display: flex;
			flex-direction: column;
			padding: 0 15rpx;
			background-color: #fff;
			margin: 20rpx 0;
			padding-bottom: 15rpx;

			.info-top {
				border-bottom: 1px solid #E2E2E2;
				color: #FD4343;
				text-align: center;
				padding: 20rpx;
			}

			.gg-info-content {
				display: flex;
				font-size: 28rpx;

				.left {
					display: flex;
					flex-wrap: wrap;

					::v-deep .u-form {
						display: flex;
						flex-wrap: wrap;
					}

					.inputData {
						width: 44%;

						.input-right {
							::v-deep .u-form-item {
								flex-shrink: inherit !important;
							}

						}
					}
				}

				.right {
					width: 50%;
				}
			}
		}

		.inputData {
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			color: #00C777;
			font-size: 30rpx;
			margin-top: 10rpx;
			background: #fff;
			padding-top: 10rpx;
			.org {
				color: #FFAB68;
			}

			.fl-left {
				width: 28%;
				display: inline-block;
				font-size: 28rpx;
			}

			.input-right {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.dw {
					margin-left: 5rpx;
					width: 70rpx;
				}
			}
		}

		.classific {
			font-size: 28rpx;
			display: flex;
			align-items: center;
			margin: 15rpx 0;
			background: #fff;
			padding: 26rpx 15rpx;

			.title {
				width: 28%;
				color: #00C777;
			}

			.class {
				display: flex;
				flex: 1;
				font-size: 28rpx;
				padding-top: 9px;
				padding-bottom: 9px;
				padding-left: 9px;
				padding-right: 9px;
				border-radius: 4px;
				border: 1px solid #dadbde;
				.item {
					width: 30%;
					border: 1px solid #ccc;
					padding: 10rpx 5rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

		}

		.upImg {
			padding: 15rpx;
			background: #fff;
			font-size: 28rpx;
		}
	}
</style>
